<script setup>
import { inject, reactive, ref } from "vue";
import { SmileOutlined, DownOutlined, SearchOutlined, BankOutlined } from '@ant-design/icons-vue';
const $axios = inject('$axios')

const updateById = (id) => {
  console.log("---------------updateById", id);
  showModal();
}
const columns = [
  { title: '序号', dataIndex: 'key', key: 'id', align: 'center', width: 80 },
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '住址', dataIndex: 'address', key: 'address' },
  { title: '标签', dataIndex: 'tags', key: 'tags' },
  { title: '操作', key: 'action' }
];
// const data = reactive([{
//   key: '1',
//   name: 'John Brown',
//   age: 32,
//   address: 'New York No. 1 Lake Park',
//   tags: ['nice', 'developer'],
// }, {
//   key: '2',
//   name: 'Jim Green',
//   age: 42,
//   address: 'London No. 1 Lake Park',
//   tags: ['loser'],
// }, {
//   key: '3',
//   name: 'Joe Black',
//   age: 32,
//   address: 'Sidney No. 1 Lake Park',
//   tags: ['cool', 'teacher'],
// }]);

//const data = reactive({ records: [] })
let data = ref([])
$axios.post('api/test/goods', {}).then(res => {
  console.log(res.data);
  //reactive proxy 不能直接赋值，否则会破坏相应对象的
  //data = res.data
  //data.records = res.data
  data.value = res.data
})
let visible = ref(false);
const showModal = () => {
  visible.value = true;
};
const handleOk = e => {
  console.log("-----关闭------");
  visible.value = false;
};
</script>

<template>
  <a-table :columns="columns"
           :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          姓名
        </span>
      </template>
      <template v-else-if="column.key === 'address'">
        <span>
          <bank-outlined />
          住址
        </span>
      </template>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'age'">
        <span>
          <smile-outlined />
          {{record.age}}
        </span>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag v-for="tag in record.tags"
                 :key="tag"
                 :color="tag === 'loser' ? 'purple' :tag === 'cool' ? 'red':'green'">
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <a-button type="primary"
                  @click="updateById(record.key)">修改</a-button>
        <a-button type="primary"
                  danger>删除</a-button>
        <a-button>详情</a-button>
      </template>
    </template>
  </a-table>
  <a-modal v-model:visible="visible"
           title="弹窗"
           @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>

<style scoped>
</style>
